<template>
    <div>
        <el-dialog
            v-model="props.updateDisable"
            title="修改页面"
            width="50%"
            :before-close="handleClose"
        >
        <el-form 
        :model="updateForm"
        :rules="rules"
                    ref="ruleFormRef">
                        <el-form-item label="印章正面" prop="sealFront" :label-width="formLabelWidth">
                            <el-upload class="avatar-uploader" action="/dev-api/api/uploadimg/"
                                :show-file-list="false" :on-success="handleAvatarSuccess">
                                <img v-if="updateForm.sealFront" :src="updateForm.sealFront" class="avatar">
                                <i v-else class="el-icon-plus avatar-uploader-icon">+</i>
                            </el-upload>
                        </el-form-item>
                        <el-form-item label="印章反面" prop="sealReverse" :label-width="formLabelWidth">
                            <el-upload class="avatar-uploader" action="/dev-api/api/uploadimg/"
                                :show-file-list="false" :on-success="handleSuccess" >
                                <img v-if="updateForm.sealReverse" :src="updateForm.sealReverse" class="avatar">
                                <i v-else class="el-icon-plus avatar-uploader-icon">+</i>
                            </el-upload>
                        </el-form-item>
                        <el-form-item label="所属分类" prop="category_id" :label-width="formLabelWidth">
                            <el-cascader
                                v-model="updateForm.category_id"
                                :options="cateData"
                                :props="cascadeDate" 
                                />
                        </el-form-item>
                        <el-form-item label="印章名称" prop="sealName"  :label-width="formLabelWidth">
                            <!-- 工具栏 -->
                            <div class="text">
                                <Toolbar :editor="editorRef" :defaultConfig="toolbarConfig"
                                    style="border-bottom: 1px solid #ccc" />
                                <!-- 编辑器 -->
                                <Editor v-model="valueHtml" :defaultConfig="editorConfig"
                                    style="height: 350px; overflow-y: hidden;" @onCreated="handleCreated" />
                            </div>
                        </el-form-item>
                    </el-form>
            <template #footer>
            <span class="dialog-footer">
                <el-button @click="resetForm(ruleFormRef)">取消</el-button>
                <el-button type="primary" @click="submitForm(ruleFormRef)">
                    修改
                </el-button>
            </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import service from '@/utils/request.ts'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import {defineEmits,defineProps,onBeforeUpdate} from 'vue'
const props = defineProps({
    updateDisable:Boolean,
    resloveObj:Number
})
const ruleFormRef = ref()
const resetForm = (formEl) => {
  if (!formEl) return
  formEl.resetFields()
  cancel()
}
const rules = reactive({
    category_id: [
    { required: true, message: '请选择分类！', trigger: 'blur' },
  ],
  sealFront:[
    { required: true, message: '请上传印章正面！', trigger: 'blur' },
  ],
  sealReverse:[
    { required: true, message: '请上传印章背面！', trigger: 'blur' },
  ],
  sealName:[{ required: true, message: '请输入名称！', trigger: 'blur' },]
})
const submitForm = async (formEl) => {
    if(filterTexgt(valueHtml.value)){
        updateForm.sealName = valueHtml.value
    }
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      editMethod()
    }
  })
}
// //过滤文本
const filterTexgt = (text)=>{
    return text.replace(/<[^>]+>|&[^>]+;/g, '').trim()
}
const editMethod = async ()=>{
    const {mesg,code} = await service.post(`/api/sealcutting/update/${props.resloveObj}`,updateForm)
    if(code===200){
        cancel()
        ElMessage(mesg)
    }
}
const cateData = ref([])
const getCateList = async ()=>{
    const {code,data} = await service.get(`/api/classify/classfiy/`)
    if(code==200){
        cateData.value = data
    }
}
const handleAvatarSuccess = (obj)=>{
    updateForm.sealFront = obj.path
}
const handleSuccess =(obj)=>{
    updateForm.sealReverse = obj.path
}
const updateForm = reactive({
    sealName:'',
    sealFront:'',
    sealReverse:'',
    category_id:''
})

const formLabelWidth = '140px'
const propsFunction = defineEmits(['editTrue'])
const cascadeDate = {value:"id",label:"name",checkStrictly:true,emitPath:false}
onMounted(()=>{
    getCateList()
})
const getObj = async ()=>{
    const {code,data} = await service.get(`/api/sealcutting/update/${props.resloveObj}`)
    if(code===200){
        if(data.length===0){
            cancel()
            return ElMessage('该对象不存在！')
        }
        updateForm.sealFront = data[0].sealFront
        updateForm.sealReverse = data[0].sealReverse
        updateForm.category_id = data[0].category_id
        valueHtml.value = data[0].sealName
    }
}
onBeforeUpdate(()=>{
    getObj()
})
const cancel = () =>{
    propsFunction('editTrue')
}
const handleClose = (done) => {
  ElMessageBox.confirm('你确定要关闭这个对话框吗？')
    .then(() => {
      done()
      cancel()
    })
    .catch(() => {
      // catch error
    })
}

// 富文本
const editorRef = shallowRef()
const toolbarConfig = ref()
// 内容 HTML
const valueHtml = ref('')
// 编辑器配置
const editorConfig = {
    placeholder: '请输入内容...',
    MENU_CONF: { /* 菜单配置，下文解释 */ }
}

const handleCreated = (editor) => {
    editorRef.value = editor // 记录 editor 实例，重要！
}
</script>

<style lang="less" scoped>

</style>
<style src="@wangeditor/editor/dist/css/style.css" >
.inputdesc {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.45);
  transition: color 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.app_detail img {
  width: auto;
}
.app_detail .ql-formats {
  line-height: 22px;
}
</style>
<style scoped>
.avatar-uploader .avatar {
  width: 178px !important;
  height: 178px !important;
  display: block !important;
}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>